<template >
  <div>
    <tableComponents
      :isShow="false"
      :isHaveAdd="false"
      :isHaveExport="false"
      :isHavePagination="false"
    >
      <template v-slot:table>
        <el-form :model="data" :rules="dataYZ" ref="data" label-width="100px">
          <div class="content_edit" v-loading="loading">
            <div class="black">
              <h5>基本信息</h5>
              <el-form-item label="角色名称" prop="role_name">
                <el-col :span="4">
                  <el-input
                    placeholder="请输入角色名称"
                    v-model="data.role_name"
                    style="width:190px"
                    clearable
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="角色描述" prop="role_desc">
                <el-col :span="8">
                  <el-input
                    placeholder="请输入角色描述"
                    v-model="data.role_desc"
                    style="width:380px"
                    clearable
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="角色类型">
                <el-col :span="8">
                  <el-radio-group v-model="radio" @change="changeRoleType">
                    <el-radio :label="1">普通管理员</el-radio>
                    <el-radio :label="2">超级管理员</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
            </div>

            <div class="black" style="border:0">
              <el-table :data="list" :span-method="objectSpanMethod" border v-show="table_see">
                <el-table-column prop="date" label="主栏目" min-width="150">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkedvalue">
                      <el-checkbox
                        :label="scope.row.parent_id"
                        :key="scope.row.parent_id"
                        @change="handleCheck2(scope.row.parent_id,scope.row.all_id)"
                      >{{scope.row.parent_title}}</el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>

                <el-table-column prop="name" label="二级栏目" min-width="150">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkedvalue">
                      <el-checkbox
                        :label="scope.row.id"
                        :key="scope.row.id"
                        @change="handleCheck3(scope.row.id,scope.row.xiaji_id)"
                      >{{scope.row.title}}</el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>

                <el-table-column prop="name" label="三级栏目" min-width="500">
                  <template slot-scope="scope">
                    <el-checkbox-group v-model="checkedvalue">
                      <el-checkbox
                        :label="one.id"
                        :key="one.id"
                        v-for="one in scope.row.z"
                      >{{one.title}}</el-checkbox>
                    </el-checkbox-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="submit_button">
              <el-col :span="24" class="tc">
                <el-button
                  :loading="$store.state.isLoading"
                  type="primary"
                  @click.prevent="addSave('data')"
                >立即创建</el-button>
              </el-col>
            </div>
          </div>
        </el-form>
      </template>
    </tableComponents>
  </div>
</template> 
<script>
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("名称不能为空"));
      } else {
        callback();
      }
    };
    var checkDesc = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("描述不能为空"));
      } else {
        callback();
      }
    };
    return {
      table_see: true,
      radio: 1,
      list: [],
      checkAll: false,
      checkedvalue: [],
      data: {
        role_name: "",
        role_desc: ""
      },
      loading: false,
      dataYZ: {
        role_name: [{ validator: checkName, trigger: "blur" }],
        role_desc: [{ validator: checkDesc, trigger: "blur" }]
      }
    };
  },
  props: {
    show: Boolean
  },
  methods: {
    handleCheck2(id, all_id) {
      var flag = false;
      var arr = this.checkedvalue;
      for (var i = 0; i < arr.length; i++) {
        if (id === arr[i]) {
          flag = true;
        }
      }

      var ar = all_id;

      var index_num = -1;
      // eslint-disable-next-line no-redeclare
      for (var i = 0; i < ar.length; i++) {
        index_num = arr.indexOf(ar[i]);
        console.log(index_num); //有则删除，删除后下标前移，所以查到下一个index_num不变

        if (flag == true) {
          console.log(id + "已选中");
          // eslint-disable-next-line no-empty
          if (index_num > -1) {
          } else {
            arr.push(ar[i]);
          }
        } else {
          console.log(id + "未选中");
          if (index_num > -1) {
            arr.splice(index_num, 1);
          }
        }
      }

      this.checkedvalue = arr;
    },

    handleCheck3(id, xiaji_id) {
      var flag = false;
      var arr = this.checkedvalue;
      for (var i = 0; i < arr.length; i++) {
        if (id === arr[i]) {
          flag = true;
        }
      }

      var ar = xiaji_id;
      var index_num = -1;

      if (ar) {
        // eslint-disable-next-line no-redeclare
        for (var i = 0; i < ar.length; i++) {
          index_num = arr.indexOf(ar[i]);
          console.log(ar.length + "下标" + index_num);

          if (flag == true) {
            // eslint-disable-next-line no-empty
            if (index_num > -1) {
            } else {
              arr.push(ar[i]);
            }
          } else {
            if (index_num > -1) {
              arr.splice(index_num, 1);
            }
          }
        }
      }

      this.checkedvalue = arr;
    },
    changeRoleType() {
      console.log(this.radio);
      if (this.radio == 1) {
        this.table_see = true;
        this.checkedvalue = [];
      } else {
        this.table_see = false;
        this.checkedvalue = "kind";
      }
    },
    getNewsAll() {
      var data = {};
      this.$api.getAdminuser.getSecondMenu(data).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
      });
    },
    // eslint-disable-next-line no-unused-vars
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        if (rowIndex + 1 == row.brother) {
          return {
            rowspan: row.sister,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    addSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var params = {};
          params["role_name"] = this.data.role_name;
          params["role_desc"] = this.data.role_desc;
          params["role_con"] = this.checkedvalue;

          this.$api.getAdminuser.roleSave(params).then(res => {
            console.log(res);
            if (res.data.code == 200 && res.data.result != null) {
              this.$emit("parent", "这里刷新父页面");
              this.$fnc.alertSuccess({
                text: "添加成功",
                url: "/index/admin/role"
              }); //成功弹出框
            } else {
              this.$fnc.alertError(res.data.result); //失败弹出框
            }
          });
        }
      });
    }
  },
  watch: {},
  mounted() {
    this.getNewsAll();
  },
  created() {}
};
</script>
